<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <!-- 头部 -->
        <TreeList :tree-data="company" @addDept="addDept" @update="initData" />
        <!-- 树形图 -->
        <el-tree :data="departs" :props="defaultProps">
          <TreeList slot-scope="{data}" :tree-data="data" :is-root="false" @addDept="addDept" @editDept="editDept" @update="initData" />
        </el-tree>
      </el-card>
    </div>
    <!-- 添加修改的弹窗 -->
    <add-dept ref="add-dept" :node-data="nodeData" @update="initData" />
  </div>
</template>

<script>

import TreeList from './components/tree-list.vue'
import AddDept from './components/add-dept.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {
  components: {
    TreeList,
    AddDept
  },
  data() {
    return {
      // 依赖一份树形数据
      company: {
        name: '',
        manager: '负责人',
        id: ''
      }, // 就是头部的数据结构
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      nodeData: {}
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化页面
    async initData() {
      const { data } = await getDepartments()
      console.log(data)
      this.company.name = data.companyName
      this.departs = tranListToTreeData(data.depts, '')
      console.log(this.departs)
    },
    // 添加弹窗打开
    addDept(val) {
      this.$refs['add-dept'].isShow = true
      this.nodeData = val
    },
    // 修改弹窗
    async editDept(val) {
      await this.$refs['add-dept'].getInfoData(val.id)
      this.$refs['add-dept'].isShow = true
    }
  }
}
</script>
